<template>
  <div class="">
    <el-card class="box-card">
      <h3 style="color:#347af4;">基础信息</h3>

      <div style="margin-top:30px;line-height: 34px;">
        <el-row>
          <el-col :span="8" class="flexbox">送达方式：{{ info.container_type }}</el-col>
          <el-col :span="8" class="flexbox">仓库： {{ info.warehouse_code }}</el-col>
          <el-col :span="8" class="flexbox">入库单ID：{{ info.inbound_order_no }}</el-col>
        </el-row>

        <el-row>
          <el-col :span="8" class="flexbox">进仓前打托：{{ info.inbound_pallet }}</el-col>
          <el-col :span="8" class="flexbox"
            >发送地址：<span class="cursor" @click="viewDetails(info)" style="color:#347af4;">查看详情</span>
          </el-col>
          <el-col :span="8" class="flexbox">创建时间：{{ info.create_time }}</el-col>
        </el-row>

        <el-row>
          <el-col :span="8" class="flexbox">接收栈板数：{{ info.receiving_inbound_pallet }}</el-col>
          <el-col :span="8" class="flexbox"></el-col>
          <el-col :span="8" class="flexbox">预计送达日期：{{ info.estimate_delivery_time }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="8" class="flexbox">运输方式：{{ info.shipping_method }}</el-col>
          <el-col :span="8" class="flexbox">柜号/物流单号：{{ info.tracking_number }}</el-col>
          <el-col :span="8" class="flexbox">采购订单号：{{ info.purchase_order_no }}</el-col>
        </el-row>
      </div>
    </el-card>

    <el-card class="box-card mtop30">
      <h3 style="color:#347af4;">入库列表</h3>

      <el-table
        :data="info.inbound_packages_list"
        default-expand-all
        row-key="ids_L"
        stripe
        border
        highlight-current-row
        class="wh100 tableContent"
        tooltip-effect="dark"
        :tree-props="{ children: 'children' }"
      >
        <el-table-column
          v-for="(item, index) in tableColumn"
          :key="index"
          :width="item.width || ''"
          :prop="item.key || ''"
          header-align="center"
          align="center"
          show-overflow-tooltip
          :fixed="item.fixed || false"
          :sortable="item.sortable || false"
          :label="item.title || ''"
          :minWidth="item.minWidth || ''"
          :index="item.index"
        >
          <template #default="scope" v-if="item.type !== 'selection' && item.type !== 'index'">
            <template v-if="item.render">
              <cl-expand :column="item" :row="scope.row" :render="item.render" :index="index" />
            </template>

            <template v-else-if="item.type !== 'selection'">
              <span>{{ scope.row[item.key] || '' }}</span>
            </template>
          </template>
        </el-table-column>
      </el-table>

      <el-footer class="footsPadding0 flexbox flex_right_center">
        <cl-pagination :paging-info="pagingInfo" @size_current_change="sizeCurrentChange" />
      </el-footer>
    </el-card>

    <el-card class="box-card mtop30">
      <h3 style="color:#347af4;">选项</h3>

      <el-row style="line-height: 34px;">
        <el-col :span="24" class="flexbox">
          服务：
          <el-checkbox-group v-model="infoModules.checkList">
            <el-checkbox label="1">中转拆柜分拣费</el-checkbox>
            <el-checkbox label="2">缠绕膜包扎费</el-checkbox>
            <el-checkbox label="3"> 贴标（外箱） </el-checkbox>
            <el-checkbox label="4"> 贴标（产品sku） </el-checkbox>
            <el-checkbox label="5"> 清点费 </el-checkbox>
            <el-checkbox label="6"> 更换外箱 </el-checkbox>
          </el-checkbox-group>
        </el-col>

        <el-col :span="24" class="flexbox">附件：--</el-col>
        <el-col :span="24" class="flexbox">备注：--</el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import ClExpand from '@/component-cl/expand/expand'

export default {
  components: {
    ClExpand,
  },

  props: {
    info: {
      type: Object,
      default: () => ({
        inbound_packages_list: [],
      }),
    },
  },

  data() {
    return {
      infoModules: { checkList: [] },
      tableDataList: [],
      pagingInfo: {
        page_size: 30,
        curr_page: 1,
        total: 0,
      },
      tableColumn: [
        {
          title: '箱子类型',
          key: 'box_model',
          minWidth: 160,
        },
        {
          title: '接收数量/总箱量',
          key: 'total_packages',
          minWidth: 160,
          render: (h, row) => {
            console.log(row, 'row=====info', this.info)
            if (!row.isChildren) {
              const { receiving_package_count = 0, total_packages = 0 } = this.info

              const val = `${receiving_package_count || 0}/${total_packages || 0}`

              return h('span', val)
            }
            return h('span', '')
          },
        },

        {
          title: '单箱尺寸',
          key: 'length',
          minWidth: 200,
          render: (h, row) => {
            if (!row.isChildren) {
              const { length = 0, height = 0, width = 0, distance_unit } = row
              let unit = ''
              if (distance_unit == 1) {
                unit = 'cm'
              } else if (distance_unit == 2) {
                unit = 'in'
              }

              const val = `${length || 0}L * ${width || 0}W * ${height || 0}H (${unit})`

              return h('span', val)
            }
            return h('span', '')
          },
        },

        {
          title: '单箱重量',
          key: 'weight',
          minWidth: 200,
          render: (h, row) => {
            if (!row.isChildren) {
              const { weight = 0, mass_unit } = row
              let unit = ''
              if (mass_unit == 1) {
                unit = 'kg'
              } else if (mass_unit == 2) {
                unit = 'lb/oz'
              }

              const val = `${weight || 0} (${unit})`

              return h('span', val)
            }
            return h('span', '')
          },
        },

        {
          title: 'SKU',
          key: 'warehouse_sku',
          minWidth: 200,
          render: (h, row) => {
            const { warehouse_sku = 0, sku } = row
            if (!row.isChildren) {
              return h('span', { style: { color: '#347af4' } }, `数量：${warehouse_sku}`)
            }
            if (row.isChildren) {
              console.log(row, 'row.isChildren')
              return h('span', sku)
            }
          },
        },

        {
          title: '产品名称',
          key: 'warehouse_sku',
          minWidth: 200,
          render: (h, row) => {
            const { warehouse_sku = 0, sku_name = '' } = row
            if (!row.isChildren) {
              return h('span', { style: { color: '#347af4' } }, `数量： ${warehouse_sku}`)
            }
            if (row.isChildren) {
              return h('span', sku_name)
            }
          },
        },

        {
          title: '标品数',
          key: 'specimen_total',
          minWidth: 200,
          render: (h, row) => {
            const { specimen_total = 0, specimen = 0 } = row
            if (!row.isChildren) {
              return h('span', { style: { color: '#347af4' } }, `总数：${specimen_total}`)
            }
            if (row.isChildren) {
              return h('span', specimen)
            }
          },
        },

        {
          title: '破损数',
          key: 'damaged_total',
          minWidth: 200,
          render: (h, row) => {
            const { damaged_total = 0, damaged = 0 } = row
            if (!row.isChildren) {
              return h('span', { style: { color: '#347af4' } }, `总数：${damaged_total}`)
            }
            if (row.isChildren) {
              return h('span', damaged)
            }
          },
        },

        {
          title: '总数量',
          key: 'sku_total',
          minWidth: 200,
          render: (h, row) => {
            const { sku_total = 0, quantity = 0 } = row
            if (!row.isChildren) {
              return h('span', { style: { color: '#347af4' } }, `总数：${sku_total}`)
            }
            if (row.isChildren) {
              return h('span', quantity)
            }
          },
        },
      ],
    }
  },

  methods: {
    viewDetails(data) {
      if (data.sender_address) {
        const h = this.$createElement
        const {
          sender_name,
          sender_phone,
          sender_email,
          sender_address_line1,
          sender_address_line2,
          sender_country_code,
        } = data.sender_address

        this.$msgbox({
          title: '地址详情',
          message: h('div', { style: { color: '#000', lineHeight: '34px', fontSize: '18px' } }, [
            h('div', null, `寄件人名称： ${sender_name}`),
            h('div', null, `寄件人电话： ${sender_phone}`),
            h('div', null, `寄件人邮箱： ${sender_email}`),
            h('div', null, `寄件人地址1： ${sender_address_line1}`),
            h('div', null, `寄件人地址2： ${sender_address_line2}`),
            h('div', null, `寄件人国家编码： ${sender_country_code}`),
          ]),
          confirmButtonText: '确定',
          closeOnClickModal: false,
        })
      } else {
        this.$alert('无参数', '地址详情', {
          confirmButtonText: '确定',
        })
      }
    },
    sizeCurrentChange({ val, type }) {
      if (type === 'size') {
        this.pagingInfo.page_size = val
      } else {
        this.pagingInfo.curr_page = val
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.tableContent /deep/ .el-table__expand-icon {
  top: 0px;
}
</style>
